<template>
  <div class="execution">
    <basic-container>
      <!--基本信息-->
      <h2 class="title">基础信息</h2>
      <div class="basics">
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6">
              <div class="grid-content bg-purple">退货订单：{{topData.returnSn}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple"></div>申请时间：{{topData.createDate}}
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light"></div>货品金额：{{topData.sumAmount}}
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light"></div>合计金额：{{topData.totalAmount}}
            </el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple"></div>客户名称：{{topData.returnCustomer}}</el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                其他费用：
                <el-input v-model="topData.otherAmount" v-enter-number type="number" oninput="if(value.length>8)value=value.slice(0,8)" placeholder="请输入内容"  @change="cuntNum"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                备注：
                <el-input v-model="remark" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
          </el-row>
        </template>
      </div>

      <h2 class="title">请款清单</h2>

      <!--请款清单数据表格-->
      <div class="requestPayoutTable">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              type="index" show-overflow-tooltip
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsImg"
              label="商品图片"
              width="180">
              <template slot-scope="scope">
                <img :src="scope.row.goodsImg" height="50px"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位">
            </el-table-column>
            <el-table-column
              prop="goodsPrice"
              label="申请退货单价">
            </el-table-column>
            <el-table-column
              label="申请退货数">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.goodsNum" v-enter-number type="number" oninput="if(value.length>8)value=value.slice(0,8)" placeholder="请输入内容" @change="cuntNum(scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入内容" maxlength="20"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="aggregate">
        <h4>商品数量  {{totalNum}}  件&nbsp;&nbsp;&nbsp;合计金额：￥{{totalPrice.toFixed(2)}}</h4>
      </div>
      <div class="refReason">
        <h3 style="float: left">退款原因</h3>&nbsp;&nbsp;
        <el-input v-model="topData.returnReason" style="width: 480px;float: left" maxlength="50" placeholder="请输入退货原因"></el-input>
      </div>
      <div class="buttonGroup">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </div>
    </basic-container>
  </div>
</template>

<script>
  import {
    getDetail,
    editSend
  } from '@/api/scm/order/return_order'
  import {
    mapGetters
  } from 'vuex'
  import Util from '@/util/pds/utils';
  let cookieUtil = new Util();
export default {
  name: "index",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      input: "",
      refundableAmount: "",
      remark: "",
      formInline: {
        serialNum: ""
      },
      tableData: [],
      totalNum:0,
      totalPrice:0,
      PleMoney: "",
      refundReason: "",
      topData:'',
      delDetails:[]
    };
  },
  computed: {
    ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
    tagLen() {
      return this.tagList.length || 0
    }
  },
  created(){
    this.init();
  },
  methods: {
    init(){
      let params = JSON.parse(this.$route.query.res);
      params.purchaseSn = params.orderSn;
      getDetail(params).then(response => {
        response.data.data.detailList.forEach((item)=>{
          item.realBuyNum = item.goodsNum
        })
        this.topData = response.data.data;
        this.tableData = this.topData.detailList;
        this.totalPrice = this.topData.sumAmount + this.topData.otherAmount;
        this.totalNum = this.tableData.length;
      })
    },
    //移除
    deleteRow(index, rows){
      this.delDetails.push(rows[index]);
      this.tableData.splice(index, 1);
      this.totalNum = this.tableData.length;
      if(this.totalNum == 0){
        this.totalPrice = 0;
        return false;
      }
      this.totalPrice = 0;
      this.tableData.forEach(item=>{
        this.totalPrice += item.goodsPrice*item.goodsNum;
      })
      this.totalPrice = parseInt(this.totalPrice) + parseInt(this.topData.otherAmount);
    },
    cuntNum(row){
      this.totalPrice = 0;
      this.tableData.forEach(item=>{
        this.totalPrice += item.goodsPrice*item.goodsNum;
      })
      this.totalPrice = parseInt(this.totalPrice) + parseInt(this.topData.otherAmount);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //提交
    save(){
      if(this.returnReason == ''){
        this.$message({
          showClose: true,
          message: '请输入退货原因',
          type: 'error'
        })
        return false;
      }
      this.topData.editDetails = this.topData.detailList;
      this.topData.delDetails = this.delDetails;
      this.topData.addDetails = [];
      let params = this.topData;
      editSend(params).then(res=>{
        if(res.code=200){
          this.$message.success("退货单编辑成功");
          let _this = this;
          setTimeout(function () {
            _this.close();
          },2000)
        }else{
          this.$message.error("退货单编辑失败")
        }
      });
    },
    close(){
      var str_before = location.href.split('#')[1];
      let { tag, key } = this.findTag(str_before);
      this.$store.commit('DEL_TAG', tag);
      this.$router.go(-1);
    },
    findTag(value) {
      let tag, key
      this.tagList.map((item, index) => {
        if (item.value === value) {
          tag = item
          key = index
        }
      })
      return { tag: tag, key: key }
    }
  }
};
</script>

<style lang="scss" scoped>
  .refReason{
    overflow: hidden;
    line-height: 36px;
  }
  .refReason h3{
    margin-right: 10px;
  }
.requestPayoutTable {
  margin: 20px 0;
}
.aggregate {
  &:after {
    content: "";
    height: 0;
    display: block;
    overflow: hidden;
    clear: both;
  }
  h4 {
    float: right;
    font-weight: 400;
  }
}
.title {
  span {
    font-size: 14px;
    font-weight: 400;
    color: #999;
  }
}
.addImg {
  margin-top: 20px;
}
.refReason {
  margin-top: 20px;
  .el-select {
    width: 40% !important;
  }
}
.buttonGroup {
  margin-top: 20px;
}

.io-goods-detail {
  margin-left: 10px;
}
.settle-accounts {
  text-align: right;
}
.basic-information {
  margin-top: 20px;
  font-weight: inherit;
}
.return-btn {
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
}
.tabContent {
  padding-left: 10px;
  .el-tabs__item {
    font-size: 20px;
  }
}
.basics {
  .el-input {
    width: 60%;
  }
}
</style>
